<template>
    <div ref="videoContent">
        <el-form-item label="" prop="videoIntroduce" style="margin-top:20px">
            <el-input v-model="temp.videoIntroduce" type='text' style='display:none'></el-input>
                <!-- <el-upload
                    ref="upload"
                    :headers="headers"
                    :action="videoActionUrl"
                    :before-upload="onBeforeUpload"
                    :on-success="uploadSuccess"
                    :on-remove="handleRemoveVideo"
                    :on-progress="handProgress"
                    :file-list="fileList"
                    :show-file-list="false"
                    :auto-upload="true"
                    :accept="'.wmv'"
                    :limit="2">
                    <el-button slot="trigger" size="small" type="primary" plain>上传视频</el-button>
                    <el-button size="small" type="danger" @click="clearUpload">移除</el-button>
                </el-upload> -->
                <el-upload
                    ref="upload"
                    :headers="headers"
                    :action="videoActionUrl"
                    :before-upload="onBeforeUpload"
                    :on-success="uploadSuccess"
                    :on-remove="handleRemoveVideo"
                    :on-progress="handProgress"
                    :file-list="fileList"
                    :show-file-list="false"
                    :auto-upload="true"
                    :limit="2">
                    <el-button slot="trigger" size="small" type="primary" plain>上传视频</el-button>
                    <el-button size="small" type="danger" @click="clearUpload">移除</el-button>
                </el-upload>
                <br/>
                <video
                    v-if='temp.videoIntroduce' 
                    ref="videoBox"
                    id="testVideo" 
                    class="video-js" 
                    height="300px"
                    preload="auto"
                    controls="" 
                    :src="temp.videoIntroduce">
                </video>
            <!-- <el-progress :text-inside="true" :stroke-width="16" :percentage="uploadProgress" v-show='uploadProgress'></el-progress> -->
        </el-form-item>
    </div>
</template>
<script>
import videoApi from 'plugins/myaxios/video/video.js';
export default {
    props:['data','bodyRecodeId','cVal','type','filePath','afterFilePath'],
    data() {
        return {
            count:0,
            videoActionUrl:'',
            preventSumit:false,
            progressFactor:0.96,
            uploadProgress:0,
            headers: {},
            fileList:[],
            temp:{
                videoIntroduce:'',
            },
        }
    },
    watch:{
        filePath(newFilePath,oldFilePath){
            this.temp.videoIntroduce = newFilePath;
        },
        afterFilePath(newFilePath,oldFilePath){
            this.temp.videoIntroduce = newFilePath;
        },

    },
    created(){
        this.$nextTick(()=>{
            let self = this;
            self.init();
        });        
    },
    methods:{
        //初始化数据视频
        init(){
            let self = this;
            if(self.type==1){
                self.$message("111111"+self.filePath);
                console.log("1111111111111111111");
                self.temp.videoIntroduce = self.filePath;
            }else if(self.type==2){
                self.$message("222222"+self.afterFilePath);
                self.temp.videoIntroduce = self.afterFilePath;
            }
            self.getUploadPath();
        },
        //获取上传视频路径
        getUploadPath(){
            let self = this;
            self.videoActionUrl =  videoApi.uploadPathForVideo();
        },
        //上传视频
        onBeforeUpload(file){
            this.progressFactor = Math.random(1)
            this.preventSumit = true
        },
        uploadSuccess(response, file, fileList) {
            // let { code , data:{picUrlList}, message } = response;
            // if(code == 0){
            // this.fileList=[{name:picUrlList[0],url:picUrlList[0]}];
            // this.uploadProgress = 100
            // this.preventSumit = false
            // this.temp.videoIntroduce = this.fileList[0].url
            // setTimeout(()=>{this.uploadProgress=0},1000)
            // }else{
            // this.$refs.upload.clearFiles();
            // this.$notify({
            // title: '失败',
            // message: message,
            // type: 'error',
            // duration: 3000
            // });
            // this.preventSumit = false
            // } 
            let self = this;
            self.$emit('sendData', {type:self.type,url:response.content});
            self.temp.videoIntroduce = response.content;
        },
        handleRemoveVideo (file) { 
            this.$refs.upload.clearFiles()
            this.fileList = []
            this.temp.videoIntroduce = ''
        },
        handProgress (file) {
            this.uploadProgress = parseInt(file.percent*this.progressFactor)
        },
        clearUpload() {
            if (!this.fileList.length) return false;
            this.$refs.upload.clearFiles() 
            this.fileList = []
            this.temp.videoIntroduce = ''
        }
    }
}
</script>